<template>
    <layout :contentPadding="'0'">
        <template #header>
            <div class="header-nav-bar">
                <van-nav-bar title="购物车" :border="false" />
            </div>
        </template>
        <van-sticky :offset-top="52">
            <van-tabs v-model:active="active" sticky shrink :color="'#ED1850'" >
                <van-tab v-for="(item) in vantabList" :title="item.title" :key="item.id" />
            </van-tabs>
        </van-sticky>
        <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedText" @load="loadMore">
            <cart-box v-for="(item) in list" :key="item.id" :item="item" />
        </van-list>
    </layout>
</template>

<script setup>
import { ref } from 'vue';
import layout from '@/components/Layout/index.vue'
import CartBox from '@/components/CartBox/index.vue'

const active = ref('0');
const vantabList = ref([
    { title: "全部", id: "0" },
    { title: "待付款", id: "1" },
    { title: "待确认", id: "2" },
    { title: "待发货", id: "4" },
    { title: "待收货", id: "5" },
    { title: "已完成", id: "6" },
]);

let loading = ref(false);
let finished = ref(false);
let finishedText = ref('--END--');

let list = ref([
    {
        "id": "2024080114401524865017",
        "goodsgroup_id": "20240527222840",
        "name": "尢朩燕窝花胶烟酰胺",
        "goods_images": [
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240527\/6a966103fb6e2f17e4d7db537e4dc842.jpg",
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240527\/944c06ed8c35abfad94defdc5d98ebf4.jpg",
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240527\/c5f28e83985cb5e37d57b6f1e1eb91a0.jpg",
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240527\/29031b955c748a4f31e1a0c1cb69c6d2.jpg",
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240527\/84c992bc09de63de15984155b6de2fc9.jpg",
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240527\/81228c0ca446c0d3c1bc1106437656b8.jpg",
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240527\/5c3a71b3b91eac00221f298294f65dbc.jpg"
        ],
        "price": "199.00",
        "num": 1,
        "total_price": "199.00",
        "buy_user_id": 24865,
        "shop_user_id": 145864,
        "is_shop": 0,
        "order_status": 1,
        "confirm_status": 0,
        "completiontime": null,
        "real_name": "测试",
        "mobile": "15021794402",
        "area": "北京市市辖区东城区",
        "address": "1111",
        "pay_image": "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240801\/f6d2892af9dbead54b2472fafd6d3680.jpg",
        "createtime": "2024-08-01 14:40:15",
        "updatetime": "2024-08-01 14:40:25",
        "logistics_number": null,
        "is_pick": 0,
        "shop_user": {
            "id": 145864,
            "nickname": "测试1",
            "email": "",
            "mobile": "15021794401",
            "avatar": "data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigxNjAsMjAxLDIyOSkiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgZG9taW5hbnQtYmFzZWxpbmU9ImNlbnRyYWwiPua1izwvdGV4dD48L3N2Zz4=",
            "shop_manager": 1,
            "shop_no": "123456",
            "shop_name": "ceshi",
            "real_name": null,
            "wx_payment_image": null,
            "alipay_payment_image": null,
            "account_bank_name": null,
            "bank_account": null,
            "invitation_code": "V0H53Z",
            "url": "\/u\/145864",
            "today_money": 0,
            "total_money": 32.55,
            "today_order_num": 0
        },
        "buy_user": {
            "id": 24865,
            "nickname": "测试3",
            "email": "",
            "mobile": "15021794402",
            "avatar": "data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigxOTIsMTYwLDIyOSkiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgZG9taW5hbnQtYmFzZWxpbmU9ImNlbnRyYWwiPua1izwvdGV4dD48L3N2Zz4=",
            "shop_manager": 0,
            "shop_no": null,
            "shop_name": null,
            "real_name": "测试3",
            "wx_payment_image": "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240802\/6984b07b5fa90fb7a288dbc2c4a46015.png",
            "alipay_payment_image": "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240730\/b29da50d52520f87466db74b53bcd8a5.jpg",
            "account_bank_name": "1111",
            "bank_account": "1111",
            "invitation_code": "DDR5CO",
            "url": "\/u\/24865",
            "today_money": 0,
            "total_money": 39.06,
            "today_order_num": 0
        },
        "status_text": "待发货"
    },
    {
        "id": "2024080114322724865468",
        "goodsgroup_id": "20240527222114",
        "name": "尢朩益生菌",
        "goods_images": [
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240527\/a88e11a4fb809ace96ccd8a2a7664ecb.png",
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240527\/c5fb86188147de8fcd917a2bec0e785f.png",
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240527\/e3478af83abd1f215f1aac6f37189f12.png",
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240527\/3250169694e39445670b4217e666573e.png",
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240527\/44b0136ec597702bf4500b45ef2414ce.png"
        ],
        "price": "199.00",
        "num": 1,
        "total_price": "199.00",
        "buy_user_id": 24865,
        "shop_user_id": 145864,
        "is_shop": 0,
        "order_status": 1,
        "confirm_status": 0,
        "completiontime": null,
        "real_name": "测试",
        "mobile": "15021794402",
        "area": "北京市市辖区东城区",
        "address": "1111",
        "pay_image": "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240801\/99ad3ecb5ec280310814e8d1056336a5.jpg",
        "createtime": "2024-08-01 14:32:27",
        "updatetime": "2024-08-01 14:32:43",
        "logistics_number": null,
        "is_pick": 0,
        "shop_user": {
            "id": 145864,
            "nickname": "测试1",
            "email": "",
            "mobile": "15021794401",
            "avatar": "data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigxNjAsMjAxLDIyOSkiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgZG9taW5hbnQtYmFzZWxpbmU9ImNlbnRyYWwiPua1izwvdGV4dD48L3N2Zz4=",
            "shop_manager": 1,
            "shop_no": "123456",
            "shop_name": "ceshi",
            "real_name": null,
            "wx_payment_image": null,
            "alipay_payment_image": null,
            "account_bank_name": null,
            "bank_account": null,
            "invitation_code": "V0H53Z",
            "url": "\/u\/145864",
            "today_money": 0,
            "total_money": 32.55,
            "today_order_num": 0
        },
        "buy_user": {
            "id": 24865,
            "nickname": "测试3",
            "email": "",
            "mobile": "15021794402",
            "avatar": "data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigxOTIsMTYwLDIyOSkiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgZG9taW5hbnQtYmFzZWxpbmU9ImNlbnRyYWwiPua1izwvdGV4dD48L3N2Zz4=",
            "shop_manager": 0,
            "shop_no": null,
            "shop_name": null,
            "real_name": "测试3",
            "wx_payment_image": "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240802\/6984b07b5fa90fb7a288dbc2c4a46015.png",
            "alipay_payment_image": "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240730\/b29da50d52520f87466db74b53bcd8a5.jpg",
            "account_bank_name": "1111",
            "bank_account": "1111",
            "invitation_code": "DDR5CO",
            "url": "\/u\/24865",
            "today_money": 0,
            "total_money": 39.06,
            "today_order_num": 0
        },
        "status_text": "待发货"
    },
    {
        "id": "2024071316232624865569",
        "goodsgroup_id": "20240328183018",
        "name": "尢朩YOUPIN红酒",
        "goods_images": [
            "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240329\/16f4d3a54696e107981bad9185572b46.jpg"
        ],
        "price": "4188.00",
        "num": 1,
        "total_price": "4188.00",
        "buy_user_id": 24865,
        "shop_user_id": 435,
        "is_shop": 0,
        "order_status": 0,
        "confirm_status": 0,
        "completiontime": null,
        "real_name": "测试",
        "mobile": "15021794402",
        "area": "北京市市辖区东城区",
        "address": "1111",
        "pay_image": null,
        "createtime": "2024-07-13 16:23:26",
        "updatetime": "2024-07-13 16:23:26",
        "logistics_number": null,
        "is_pick": 0,
        "shop_user": {
            "id": 435,
            "nickname": "谯丽丽",
            "email": "",
            "mobile": "18717946606",
            "avatar": "data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigyMjksMTYwLDE5MykiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgZG9taW5hbnQtYmFzZWxpbmU9ImNlbnRyYWwiPuiwrzwvdGV4dD48L3N2Zz4=",
            "shop_manager": 1,
            "shop_no": "9U2THE",
            "shop_name": "惠聚优选商城",
            "real_name": "谯丽丽",
            "wx_payment_image": "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240402\/629b9ec7d7a11bb0fef83620108d064a.jpeg",
            "alipay_payment_image": "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240402\/516f09abf3a12edab2df0f3347f17073.jpeg",
            "account_bank_name": "招商银行上海支行",
            "bank_account": "6214 8512 1732 5526",
            "invitation_code": "JHCRSM",
            "url": "\/u\/435",
            "today_money": 304.08,
            "total_money": 40607.98,
            "today_order_num": 0
        },
        "buy_user": {
            "id": 24865,
            "nickname": "测试3",
            "email": "",
            "mobile": "15021794402",
            "avatar": "data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigxOTIsMTYwLDIyOSkiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgZG9taW5hbnQtYmFzZWxpbmU9ImNlbnRyYWwiPua1izwvdGV4dD48L3N2Zz4=",
            "shop_manager": 0,
            "shop_no": null,
            "shop_name": null,
            "real_name": "测试3",
            "wx_payment_image": "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240802\/6984b07b5fa90fb7a288dbc2c4a46015.png",
            "alipay_payment_image": "https:\/\/ypsc1314.oss-cn-hangzhou.aliyuncs.com\/601\/uploads\/20240730\/b29da50d52520f87466db74b53bcd8a5.jpg",
            "account_bank_name": "1111",
            "bank_account": "1111",
            "invitation_code": "DDR5CO",
            "url": "\/u\/24865",
            "today_money": 0,
            "total_money": 39.06,
            "today_order_num": 0
        },
        "status_text": "待付款"
    }
])
let loadMore = () => {
    console.log(list.value, '数据')
    setTimeout(() => {

        loading.value = false;   // 数据全部加载完成

        if (list.value.length >= 3) {   // 数据全部加载完成
            finished.value = true;
        }
    }, 1000);
}


</script>

<style lang="scss" scoped>
.header-nav-bar {
    height: 100px;
    background: linear-gradient(to right, var(--orange-color), var(--red-color));
    color: var(--white);

    :deep(.van-nav-bar__title) {
        color: var(--white);
    }

    :deep(.van-nav-bar) {
        background-color: transparent;
    }

    :deep(.van-nav-bar .van-icon) {
        color: var(--white);
    }
}
</style>